<template>

    <van-tabs v-model:active="activeName" animated @click-tab="onClickTab(activeName)">
        <!-- 科室 -->
        <van-tab :title="item.title" v-for="item in titleLiat" :name="item.id">

            <!-- 科室相应医生卡片组件 -->
            <van-card v-for="(items, index) in doctorList" :key=" 'img' + index" :title="items.name" :desc="items.level"
                :thumb="items.avatar">
                <template #tags>
                    <van-space :size="15">
                        <van-tag plain type="danger" size="medium">{{ parseInt(Math.random() * 10000) }}</van-tag>
                        <van-tag plain type="danger" size="medium">接诊量</van-tag>
                    </van-space>
                </template>
                <template #footer>
                    <van-button round type="success" size="small" color="#1486fa"
                        @click="toRegister(items.name,item.title,'2022/10/14')">
                        &nbsp;&nbsp;&nbsp;&nbsp;预约&nbsp;&nbsp;&nbsp;&nbsp;
                    </van-button>
                    <div class="van-multi-ellipsis--l2" style=" margin-top: 5px; font-size: 14px; text-align: left;">
                        {{ items.introduce }}
                    </div>
                </template>
            </van-card>

        </van-tab>
    </van-tabs>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getDoctor } from "../../api/api";
import router from "../../router";
import $bus from "../../config/eventBus";

// 存放医生数据
const doctorList = ref([]);

//标签切换 
const activeName = ref(20);

const titleLiat = ref([
    { id: 20, title: '皮肤科' },
    { id: 21, title: '骨科' },
    { id: 14, title: '神经科' },
    { id: 17, title: '内科' },
    { id: 16, title: '外科' },
]);


// 点击获取医生数据并筛选出名医
const onClickTab = async (id: number) => {
    // console.log(id);

    // 获取医生数据
    const { data: res } = await getDoctor();
    // console.log(res);
    // 筛选医生数据
    doctorList.value = res.data.data.filter((item: { depid: number; level: string; }) => item.depid === id && item.level === '主任医师')
    // console.log(doctorList.value);
}
onClickTab(20)

// 点击跳转到挂号页面
const toRegister = (name, depname,clinicaltime) => {
    // 传递科室名称 
    // $bus.emit('getDepartment', depname,)
    // 路由传递医生参数  
    router.push({
        path: '/confirm',
        query: {
            name: encodeURI(name),
            depname: encodeURI(depname),
            clinicaltime: encodeURI(clinicaltime),
        }
    })
    console.log(name);
    console.log(depname);

}

</script>

<style scoped lang="scss">

</style>